<template>
    <div>
        <view class="top">
            <view class="logobox"><image src="/static/images/logo.jfif" mode='aspectFit'></image></view>
            <view class="search">
                <image src="/static/images/search.png" mode='aspectFit'></image>
                <input type="text" placeholder="lily超品日，3折封顶">
            </view>
            <view class="more"><image src="/static/images/more.png" mode='aspectFit'></image></view>
        </view>
        <!-- top end -->

        <swiper class="banner" indicator-dots='true' indicator-active-color='red'>
            <swiper-item>
                <image src="http://img61.ddimg.cn/upload_img/00478/0609/750x315-wy-1585651737.jpg"></image>
            </swiper-item>
            <swiper-item>
                <image src="http://img62.ddimg.cn/upload_img/00822/cxtc/750x315-1581495591.jpg"></image>
            </swiper-item>
            <swiper-item>
                <image src="http://img60.ddimg.cn/upload_img/00785/ts0401_0406/750x315-1585377174.jpg"></image>
            </swiper-item>
        </swiper>
        <!-- banner end -->

        <view class="classify">
            <view class="list" v-for="(item,index) of classify" :key="index">
                <view><image :src="item.image"></image></view>
                <text>{{item.name}}</text>
            </view>
        </view>
        <!-- 分类 end -->

        <view class="min-banner">
            <image src="http://img60.ddimg.cn/upload_img/00796/xssd202004/750x315-1585639657.png"></image>
        </view>
        <!-- min-banner end -->

        <view class="shopbox">
            <view class="s-list" v-for="(item,index) of shopList" :key="index" @click="toDetail(item._id)">
                <image :src="item.image" mode='aspectFit'></image>
                <view class="title">{{item.name}}</view>
                <text>当当自营</text> <text class="man">满减</text>
                <view class="price">￥<text>{{item.price}}</text></view>
            </view>
        </view>
    </div>
</template>
<script>
export default {
  data(){
      return{
        shopList: [],
        classify: []
      }
  },
     
  methods:{
    toDetail(id){
      wx.navigateTo({
        url: '/pages/detail/main?id=' + id
      })
    }
  },
  onLoad(){
    wx.request({
      url: 'http://localhost:3000/booklist',
      success:res=>{
        this.shopList = res.data
      }
    })
    wx.request({
      url: 'http://localhost:3000/typelist',
      success:res=>{
        this.classify = res.data
      }
    })
  }
}
</script>
<style scoped>
div{
  background: #eee;
}
.top{
  width: 750rpx;
  height: 86rpx;
  background: white;
  display: flex;
  justify-content: space-evenly;
}
.top .logobox image{
  width: 80rpx;
  height: 80rpx;
  margin-top: 3rpx;
}
.top .search{
  width: 540rpx;
  height: 60rpx;
  background: #eee;
  border-radius: 30rpx;
  display: flex;
  font-size: 14px;
  margin-top: 15rpx;
}
.top .search image{
  width: 38rpx;
  height: 38rpx;
  margin-top: 10rpx;
  margin-left: 20rpx;
  margin-right: 10rpx;
}
.top .search input{
  margin-top: 7rpx;
  color: #666;
}
.top .more image{
  width: 56rpx;
  height: 56rpx;
  margin-top: 15rpx;
}
/* top end */

.banner{
  width: 750rpx;
  height: 220rpx;
}
.banner image{
  width: 100%;
  height: 100%;
}
/* banner end */

.classify{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background: #fff;
}
.classify .list{
  width: 150rpx;
  height: 150rpx;
  overflow: hidden;
  text-align: center;
}
.classify .list >view{
    width: 150rpx;
    height: 90rpx;
    overflow: hidden;
}
.classify .list image{
    width: 150rpx;
    height: 150rpx;
}
/* classify end */

.min-banner{
  width: 750rpx;
  height: 206rpx;
  margin-bottom: 10rpx;
  margin-top: 20rpx;
  overflow: hidden;
}
.min-banner image{
  width: 750rpx;
  height: 206rpx;
}
/* .min-banner end */

.shopbox{
  width: 750rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #eee;
}
.shopbox .s-list{
  width: 372rpx;
  height: 578rpx;
  background: white;
  margin-top: 10rpx;
  overflow: hidden;
}
.shopbox .s-list image{
  width: 380rpx;
  height: 410rpx;
  display: block;
}
.shopbox .s-list .title{
  padding-left: 10rpx;
  padding-right: 10rpx;
  box-sizing: border-box;
  margin-bottom: 10rpx;
}
.shopbox .s-list >text{
  padding-left: 5rpx;
  padding-right: 5rpx;
  margin-left: 10rpx;
  color: red;
  border: 1px solid red;
  font-size: 14px;
  border-radius: 6rpx;
}
.shopbox .s-list .man{
  background: red;
  color: white;
}
.shopbox .s-list .price{
  margin-left: 10rpx;
  color: red;
  margin-top: 10rpx;
}
.shopbox .s-list .price text{
  font-size: 18px;
}
</style>